<!--菜单-->
<template>
  <div class="menus-box">
    <PageTitle class="boxTitle" :text="title"></PageTitle>
    <div class="con-box menuMain">
      <dl v-for="(item,index) in menuList" :key="index" @click="detail(item)">
        <dt :style="'background-color:'+item.color">
          <img :src="item.icon" v-if="item.icon" />
        </dt>
        <dd>{{item.title}}</dd>  
      </dl>
    </div>
    <FooterTel></FooterTel>
  </div>
</template>

<script>
import PageTitle from '../components/pageTitle.vue'
import FooterTel from '../components/footerTel.vue'
export default {
  name: 'Detail',
  components: {
    PageTitle,
    FooterTel
  },
  data () {
    return {
      title: null,
      menuList: [{
        color: '#f8518b',
        icon: require('@/static/image/menuIcon/jg.png'),
        title: '机构信息',
        router: '/pages/menus/organizationInfo/index',
      }, {
        color: '#01d7c8',
        icon: require('@/static/image/menuIcon/price.png'),
        title: '价格信息',
        router: '/pages/menus/priceInfo/index',
      }, {
        color: '#03b5f7',
        icon: require('@/static/image/menuIcon/fwxx.png'),
        title: '服务信息',
        router: '/pages/menus/serviceInfo/index',
      }, {
        color: '#8ad300',
        icon: require('@/static/image/menuIcon/zcfg.png'),
        title: '政策法规',
        router: '/pages/menus/policiesRegulations/index',
      }, {
        color: '#ffae01',
        icon: require('@/static/image/menuIcon/yjgl.png'),
        title: '应急管理',
        router: '/pages/menus/emergencyManagement/index',
      }, {
        color: '#996dff',
        icon: require('@/static/image/menuIcon/aj.png'),
        title: '安检、抄表信息',
        router: '/pages/menus/planningInfo/index',
      }, {
        color: '#fe8b12',
        icon: require('@/static/image/menuIcon/sssb.png'),
        title: '设施设备',
        router: '/pages/menus/facilitiesEequipment/index',
      }, {
        color: '#d268e9',
        icon: require('@/static/image/menuIcon/tsjd.png'),
        title: '投诉监督',
        router: '/pages/menus/complaintSupervision/index',
      }, {
        color: '#f6665f',
        icon: require('@/static/image/menuIcon/gq.png'),
        title: '回应关切',
        router: '/pages/menus/respondConcerns/index',
      }, {
        color: '#fdcd00',
        icon: require('@/static/image/menuIcon/xzxk.png'),
        title: '行政许可',
        router: '/pages/menus/administrativeLicense/index',
      }, {
        color: '#1bbedb',
        icon: require('@/static/image/menuIcon/txjy.png'),
        title: '特许经营',
        router: '/pages/menus/franchise/index',
      }, {
        icon: '',
        title: '',
        router: '',
      }]
    };
  },
  async onShow () {

  },
  async onLoad (e) {
    var vm = this;
    vm.title = e.title
  },
  created () { },
  methods: {
    detail (item) {
      var vm = this;
      vm.func.goto(item.router + '?title=' + item.title)
    }
  },
  mounted () {
    var vm = this;
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.menus-box {
  width: 100%;
  height: 100%;
  .boxTitle {
    margin: 10px 14px;
  }
  .menuMain {
    margin: 14px;
    display: flex;
    flex-wrap: wrap;
    > dl {
      width: 33.33%;
      padding: 50rpx 0;
      box-sizing: border-box;
      border-bottom: 1rpx solid #f2f2f2;
      border-right: 1rpx solid #f2f2f2;
      text-align: center;
      font-size: 13px;
      &:nth-child(3n) {
        border-right: none;
      }
      &:nth-last-child(-n + 3) {
        border-bottom: none;
      }
      dt {
        margin: 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 50%;
          height: 50%;
        }
      }
      dd {
        padding-top: 12px;
      }
    }
  }
}
</style>
